<template>
<div>
     <h1>过度</h1>
<button @click  = "isShow = !isShow">显示/隐藏</button>

<transition appear>
    <h2 class='name' v-show="isShow" >我是{{name}}</h2>
</transition>


<transition name = 'x'>
    <h2 class='name' v-show="isShow" >我是取了名字的动画元素</h2>
</transition>
</div>
</template>

<script>
export default {
    name:'Test2',
    data(){
        return {
            name:'测试组件',
            isShow:true
        }
    }
}
</script>


<style>
    .name{
        background: lightblue;
    }
    /* 下面写个过度 */
    /* 来去的效果vue其实不止准备了一个，还有一个 */
         .v-enter{
         /* 跟动画不一样，这里写的是进入起点，它会给你拨正 */
         transform:translatex(-100%)
    }
    .v-enter-to{
        /* 这里进入写终点 */
         transform:translatex(0)
    }

    /* 还有个离开的起点和终点，你知道咋写吧 */


    h2{
        /* 过度的事件就写这里 */
        transition: 2s linear;
    }
</style>